/**  
 * 监听屏幕大小变化，动态设置筛选项[更多]是否显示
 * @params tarMorelist: 点击对象
 * @params refNum: 超过高度则显示
 */

export const ResizeHandleMoreMixin = {
  data() {
    return {
      more: {},
      tarMorelist: ['moreRef0', 'moreRef1', 'moreRef2', 'moreRef3'], // 默认设置3处点击对象
      screenWidth: document.body.clientWidth
    }
  },
  methods: {
    // 根据screen动态设置筛选项是否增加[更多]
    resetSetBtnMore() {
      this.tarMorelist.forEach(item => {
        this.setBtnMore(item)
      })
    },
    setBtnMore(ref) {
      this.more[ref] = false
      this.more[ref + 'Class'] = false
      if (this.$refs && this.$refs[ref] &&
        this.$refs[ref].querySelector('ul') &&
        this.$refs[ref].querySelector('ul').scrollHeight > (this.refNum || 44)) {
        this.more[ref + 'Class'] = true
        this.more[ref] = true
      }
      this.$forceUpdate();
    },
    // 点击[更多]，展示所有
    changeMore(ref) {
      this.$set(this.more, ref, !this.more[ref])
      this.$forceUpdate();
    },
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.resetSetBtnMore()
          that.timer = false
        }, 500)
      }
    }
  },
}